<template>
	<view class="content">
		<NavbarView />
		<view class="detail-content-view">
			<view class="detail-content">
				<view class="detail-left">
					<image class="detail-img"
						src="https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg"
						mode=""></image>
				</view>
				<view class="detail-right">
					<view class="detail-right-top">
						<view class="detail-book-title-view">
							<view class="detail-book-title-text">理想国（汉译世界学术名著丛书）</view>
							<view class="book-detail-score">9.0</view>
						</view>
						<view class="detail-book-info-view">
							<view class="detail-info-view">
								<view>作者：酒小七</view>
								<view class="books-num">字数：34.7万字</view>
								<view>出版社：江苏文艺出版社</view>
							</view>
							<view class="score-num">1531人评分</view>
						</view>
					</view>
					<view class="detail-right-middle">
						<view class="detail-book-price">
							<view class="price-view">
								<view class="price-text">价格：1999阅饼</view>
								<view class="pirce-line"></view>
								<view class="del-price-text">原价：5999阅饼</view>
							</view>
							<view class="price-btn-view">
								<view v-if="isBuy" class="fee-read" @tap.stop="goRead(1)">点击阅读</view>
								<view v-if="!isBuy" class="fee-read" @tap.stop="goRead(2)">免费试读</view>
								<view v-if="!isBuy" class="buy-book-btn" @tap.stop="buyBooks">4折购买</view>
							</view>
						</view>
						<view class="right-code">
							<image class="detail-code-img" src="//pweb.d.ireader.com/static/images/sjxq/look_phone.jpg"
								mode=""></image>
							<image class="detail-code-img" src="//pweb.d.ireader.com/static/images/sjxq/look_phone.jpg"
								mode=""></image>
						</view>
					</view>
					<view class="detail-right-bottom">
						柏拉图的《理想国》探讨了许多重要的主题，如正义、政治、教育和哲学。他通过对话的方式，引导读者思考关于国家的管理、个人责任和社会秩序等问题。这本书对于理解古希腊哲学和政治思想的发展具有重要意义，也对后世的政治哲学和社会学产生了深远的影响。
					</view>
				</view>
			</view>
			<view class="detail-content1">
				<!-- chat -->
				<view class="book-detail-info-view-left">
					<view v-if="!login">
						<view class="iframe-view">登录后即可chat</view>
						<view class="login-view">
							<view class="login-view1" @tap.stop="goLogin">点击登录</view>
						</view>
					</view>
					<iframe v-else id="myFrame" src="http://chat.shyf.cc/#/chat/1002" frameborder="0" scrolling='no' width="600" height="800" disabled></iframe>
					
				</view>
				<view class="book-detail-info-view-right">
					<view class="book-detail-right-top">
						<view class="see-title-view">看过的人还看</view>
						<view class="books-view">
							<view class="books-item-view" v-for="(item,index) in 5" :key="index">
								<image class="books-image"
									src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_105,h_140,q_100/9f569f5c/group61/M00/F3/84/CmQUOGBLKRSEWy3oAAAAAEyUnlo563520715.jpg?v=wEFfMPpv&t=CmQUOGBLKRQ."
									mode=""></image>
								<view class="detail-books-name">宫墙柳</view>
								<view class="detail-books-autor">梦娃</view>
								<view class="detail-see-view">
									<view><u-icon name="eye-fill" color="#9E9E9E" size="26"></u-icon></view>
									<view class="see-num-text">551</view>
								</view>
							</view>
						</view>
					</view>
					<view class="book-detail-right-bottom">
						<view class="see-title-view">同类热销榜</view>
						<view class="bank-view">
							<view v-for="(item,index) in bookList" :key="index" @mousemove="changeBook(index)">
								<view v-if="selectBookIndex === index" class="bank-view-list-sel">
									<view class="bank-book-id">{{item.id}}</view>
									<image class="bank-book-image"
										src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_63,h_84,q_100/e3156511/group61/M00/ED/95/CmQUOV0jGRyEJoaVAAAAAALs4JQ223908335.jpg?v=K9HfzX46&t=CmQUOWLNLM4."
										mode=""></image>
									<view class="bank-books-right">
										<view class="bank-books-name-text">{{item.name}}</view>
										<view class="books-see-view">
											<view><u-icon name="eye-fill" color="#9E9E9E" size="30"></u-icon></view>
											<view class="see-num-text">{{item.see}}</view>
										</view>
									</view>
								</view>
								<view v-else class="bank-view-list">
									<view style="display: flex;">
										<view class="bank-book-id">{{item.id}}</view>
										<view class="bank-book-name">{{item.name}}</view>
									</view>
									<view style="display: flex;">
										<view><u-icon name="eye-fill" color="#9E9E9E" size="30"></u-icon></view>
										<view class="see-num-text">{{item.see}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavbarView from '@/components/navbar-view/navbar-view.vue'
	export default {
		data() {
			return {
				bookList: [
					{
						id: 1,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 2,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 3,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 4,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 5,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 6,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 7,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 8,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 9,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 10,
						name: '微水浮沉',
						see: 5622
					},
				],
				selectBookIndex: 0,
				login: false,
				isBuy: false
			}
		},
		components: { NavbarView },
		onShow() {
			if (uni.getStorageSync('phone')) {
				this.login = true
			} else {
				this.login = false
			}
		},
		methods: {
			changeBook(index) {
				this.selectBookIndex = index
			},
			goLogin(){
				uni.navigateTo({ url:'/pages/index/login' })
			},
			buyBooks() {
				if (this.login) {
					uni.showModal({
						content: '请确认支付',
						success: res => {
							if (res.confirm) {
								uni.showToast({ title: '购买成功' })
								this.isBuy = true
							}
						}
					})
				} else {
					uni.showModal({
						content: '未登录,请登录后操作',
						confirmText: '登录',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({ url: '/pages/index/login' })
							}
						}
					})
				}
			},
			goRead(index) {
				window.open('#/pages/index/reader?isbuy=' + index)
			}
		}
	}
</script>

<style scoped>
	.detail-content-view {
		width: 1000px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.detail-content {
		display: flex;
		width: 100%;
		margin-top: 80rpx;
		background-color: #fff;
	}

	.detail-left {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 140rpx 100rpx;
		border-right: 1rpx solid #F0F0F0;
	}

	.detail-right {
		flex: 1;
	}

	.detail-img {
		width: 156px;
		height: 208px;
	}

	.detail-right-top {
		padding: 30rpx 50rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.detail-book-title-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail-book-title-text {
		font-size: 40rpx;
	}

	.book-detail-score {
		font-size: 34rpx;
	}

	.detail-book-info-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: 300;
	}

	.detail-info-view {
		display: flex;
	}

	.books-num {
		margin: 0 20rpx;
	}

	.detail-right-middle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 50rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.detail-book-price {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.price-view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.pirce-line {
		margin: 0 20rpx;
		width: 2rpx;
		height: 20rpx;
		background-color: #F0F0F0;
	}

	.del-price-text {
		color: #999;
		text-decoration: line-through;
	}

	.detail-code-img {
		width: 75px;
		height: 75px;
		margin-left: 20rpx;
	}

	.price-btn-view {
		display: flex;
		font-size: 28rpx;
		color: #fff;
		margin-top: 40rpx;
	}

	.fee-read {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #8BC34A;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;
	}

	.buy-book-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F26552;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;
		margin-left: 20rpx;
	}

	.detail-right-bottom {
		font-size: 24rpx;
		font-weight: 300;
		padding: 30rpx 50rpx;
		line-height: 34rpx;
	}

	.detail-content1 {
		display: flex;
		width: 100%;
		margin-top: 80rpx;
	}

	.book-detail-info-view-left {
		width: 70%;
		background-color: #fff;
	}
	.iframe-view {
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		font-size: 32rpx;
	}
	.login-view {
		display: flex;
		/* width: 400rpx; */
		justify-content: center;
		margin-top: 40rpx;
	}
	.login-view1 {
		padding: 14rpx 60rpx;
		background-color: blue;
		color: #fff;
		border-radius: 12rpx;
	}
	.book-detail-info-view-right {
		flex: 1;
		background-color: #FAFAFA;
	}

	.book-detail-right-top {
		padding: 120rpx 70rpx 80rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.book-detail-right-bottom {
		padding: 80rpx 70rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.see-title-view {
		font-size: 34rpx;
	}

	.books-view {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.books-item-view {
		margin-top: 40rpx;
	}

	.books-image {
		width: 105px;
		height: 140px;
	}

	.detail-books-name {
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.detail-books-autor {
		font-size: 24rpx;
		font-weight: 300;
		margin: 14rpx 0 10rpx;
	}

	.detail-see-view {
		display: flex;
		align-items: center;
	}

	.see-num-text {
		font-size: 24rpx;
		font-weight: 300;
	}

	.bank-view {
		display: flex;
		flex-direction: column;
	}

	.bank-view-list-sel {
		display: flex;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-view-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-book-id {
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bank-book-name {
		margin-left: 30rpx;
	}

	.bank-book-image {
		width: 63px;
		height: 84px;
		margin: 0 30rpx;
	}

	.bank-books-name-text {
		font-size: 24rpx;
		color: #000;
	}

	.books-see-view {
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.see-num-text {
		margin-left: 10rpx;
	}

	.middle-view-item {
		flex: 1;
		border-right: 1rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
	}

	.book-item-view {
		flex: 1;
		padding: 60rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.book-image {
		width: 102px;
		height: 136px;
	}

	.book-text1 {
		width: 102px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 26rpx;
		margin: 14rpx 0 10rpx;
	}

	.book-text2 {
		font-size: 22rpx;
		color: #999;
	}

	.book-title {
		font-size: 32rpx;
	}

	.autor {
		font-size: 24rpx;
		font-weight: 300;
		margin-top: 20rpx;
	}

	.instroduce-text {
		font-size: 24rpx;
		font-weight: 300;
		margin-top: 40rpx;
	}

	.image-view {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 250rpx;
	}

	.logo-image {
		width: 158px;
		height: 208px;
	}
</style>